<script setup>
// 获取原生dom
import { onMounted, ref } from 'vue';
// 导入自定义组件
import TestXxx from './components/Test2.vue';

// 定义原生dom容器
const hRef = ref(null);
const getH1 = () => {
  console.dir(hRef.value.innerText);
  console.dir(hRef.value);
};
// 获取原生dom
const inputRef = ref(null);
const setBlur = () => {
  inputRef.value.blur();
};
// 在组件渲染完毕后，设置input焦点
onMounted(() => {
  inputRef.value.focus();
});

// 获取自定义组件
const testRef = ref(null);
const getTest = () => {
  console.log(testRef.value);
  // 调用暴露函数，获取暴露的数据
  testRef.value.testFn();
  console.log(testRef.value.testData);
};
</script>

<template>
  <h1 ref="hRef">123</h1>
  <button @click="getH1">按钮</button>

  <input ref="inputRef" type="text" />
  <button @click="setBlur">失去焦点</button>
  <hr />
  <TestXxx ref="testRef" />
  <hr />
  <button @click="getTest">获取自定义组件</button>
</template>
